<template>
  <!--登录表单的容器-->
  <div class="login_container">
    <!--登录区域-->
    <div class="login_box">
      <!--应用:Logo-->
      <div class="login_logo">W Y @ A J</div>
      <!--登录表单-->
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="0px" class="login_from">
        <el-form-item prop="username">
          <el-autocomplete placeholder="请输入账户" class="u_input" :validate-event="false" :fetch-suggestions="querySearch" @select="handleSelect" popper-class="info_autocomplete" v-model="loginForm.username" clearable prefix-icon="iconfont icon-yonghu">
            <template slot-scope="{ item }">
              <div class="username"><i class="iconfont icon-yonghu"></i><span>{{ item.username }}</span></div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" :validate-event="false" show-password clearable prefix-icon="iconfont icon-tianchongxing-"></el-input>
        </el-form-item>
        <el-form-item class="login_btn">
          <div class="bg_btn"></div>
          <el-button class="sub_btn" round icon="el-icon-right" @click="submitForm()"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login_foot">
      <div class="foot_text">
        <a href="javascript:;" @click="forget">忘记密码</a>|<a href="javascript:;" @click="register">用户注册</a>
      </div>
      <div class="foot_msg">
        备案号:<a href="https://beian.miit.gov.cn/">蜀ICP备2021012076号-1</a>
      </div>
    </div>
  </div>
</template>

<script>
// 导入加密传输工具
import { Enc } from '../../utils/secret'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 24, message: '长度在 6 到 24 个字符', trigger: 'blur' }
        ]
      },
      restaurants: []
    }
  },
  methods: {
    // 提交表单
    submitForm () {
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中',
            customClass: 'iconfont icon-jiazai2',
            background: 'rgba(0, 0, 0, .7)'
          })
          try {
            // 第一步获取密钥:参数加密传输
            const { data: enKey } = await this.$http.post('/ajshow/auth/getEncKey')
            if (!enKey.status) {
              loading.close()
              return this.$message.warning('初始化第一次连接')
            }
            const res = await this.$http.post('/ajshow/auth/login', { username: this.loginForm.username, password: Enc(this.loginForm.password, enKey.data) })
            if (res.status === 200) {
              if (res.data.status) {
                localStorage.setItem('token', res.data.data.access_token)
                localStorage.setItem('refresh_token', res.data.data.refresh_token)
                const us = JSON.parse(localStorage.getItem('users'))
                let flag = true
                for (let i = 0; i < us.length; i++) {
                  if (us[i].username === this.loginForm.username) {
                    flag = false
                    break
                  }
                }
                if (flag) us.push(this.loginForm)
                localStorage.setItem('users', JSON.stringify(us))
                this.$message.success('登录成功')
                this.$router.push('/home/index')
              } else this.$message.warning(res.data.msg ? res.data.msg : '登录失败')
            } else this.$message.error('接口异常')
          } catch (e) {
            this.$message.error(e.toString())
          }
          loading.close()
        } else {
          this.$message.warning('校验失败')
          // this.$refs.loginFormRef.resetFields()
        }
      })
    },
    // 查询保存的登录项
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(res => res.username.toLowerCase().indexOf(queryString.toLowerCase()) === 0) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 加载登录项
    loadAll () {
      const users = localStorage.getItem('users')
      let us = []
      if (!users) {
        localStorage.setItem('users', JSON.stringify(us))
      } else {
        us = JSON.parse(users)
      }
      return us
    },
    // 处理选择
    handleSelect (item) {
      this.loginForm.username = item.username
      this.loginForm.password = item.password
    },
    // 忘记密码
    forget () {
      this.$router.push('/minor/forget')
    },
    // 注册用户
    register () {
      this.$router.push('/minor/register')
    }
  },
  // 一进来就先加载
  mounted () {
    this.restaurants = this.loadAll()
  }
}
</script>

<style lang="less" scoped>
  .login_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    background: linear-gradient(135deg,#05D7E1,#947ADF,#26E0C6);
    background-size:200% 200%;
    animation:bgmove 30s ease infinite;
    -webkit-animation: bgmove 30s ease infinite;
    -moz-animation: bgmove 30s ease infinite;
    @keyframes bgmove
    {
      0% {background-position: 0 0; }
      25% {background-position: 50% 50%; }
      50% {background-position: 100% 100%; }
      75% {background-position: 50% 50%; }
      100% {background-position: 0 0; }
    }
  }
  .login_box{
    overflow-y: scroll;
    padding: 80px 20px;
    /*background-color: rgba(255,255,255,.1);*/
    .login_logo{
      display: block;
      padding: 50px;
      font-size: 40px;
      line-height: 50px;
      text-align: center;
      color: white;
      text-shadow: 2px 6px 4px rgba(0,0,0,.1);
    }
    .login_from{
      padding: 0 10%;
      .u_input{
        width: 100%;
      }
      .login_btn{
        display: flex;
        justify-content: center;
        padding-top: 30px;
        .sub_btn{
          color: white;
          font-size: 30px;
          height: 60px;
          width: 60px;
          border: none;
          border-radius: 50%;
          padding: 5px;
          background: linear-gradient(45deg,#05D7E1,#947ADF,#26E0C6);
          background-size:200% 200%;
          animation:btnmove 30s ease infinite;
          -webkit-animation: btnmove 30s ease infinite;
          -moz-animation: btnmove 30s ease infinite;
          /*transform: rotateZ(0deg) */
          @keyframes btnmove
          {
            0% {background-position: 50% 50%;}
            25% {background-position: 100% 0;}
            50% {background-position: 50% 50%;}
            75% {background-position: 0 100%;}
            100% {background-position: 50% 50%;}
          }
        }
      }
    }
  }
  .login_foot{
    width: 100%;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    align-items: center;
    position: relative;
    .foot_text{
      width: 80%;
      height: 60%;
      display: flex;
      font-size: 10px;
      justify-content: space-around;
      a {
        text-decoration: none;
        color: rgba(255,255,255,.95);
      }
    }
    .foot_msg{
      position: absolute;
      bottom: 5px;
      font-size: 5px;
      a {
        font-size: 5px;
        text-decoration: none;
        color: rgba(255,255,255,.95);
      }
    }
  }
  .info_autocomplete {
    li {
      line-height: normal;
      .username {
        text-overflow: ellipsis;
        color: gray;
        padding: 5px 0;
        overflow: hidden;
        i {
          padding-right: 10px;
        }
      }
    }
  }
</style>
